<template>
    <div class="box">
            <!-- --------------------------顶部搜索框 -->
        <div class="search">
            <el-input class="inputUser" v-model="goodsSn" placeholder="请输入商品编号"></el-input>
            <el-input class="inputNumber" v-model="name" placeholder="请输入商品名称"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">查找</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="add">添加</el-button>
            <!-- ---------------导出excel表格 -->
            <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="商品信息.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="primary" icon="el-icon-download" >导出</el-button>
              </download-excel>

                 <!-- 嵌套的表单 用来添加或编辑内容 -->
            <el-dialog title="商品详情" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules">
                   <template slot="">
                        <p v-html="this.detail"></p>
                   </template>

                </el-form>
            </el-dialog>
        </div>
        <!-- -----------------------------------表格内容 -->
        <el-table
            :data="tableData"
            style="width: 100%"
            border
            >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="宣传画廊">
                            <img class="gallery" v-for="item in props.row.gallery" :key="item"  :src="item" alt="">
                        </el-form-item>
                        <el-form-item label="商品介绍">
                            <span>{{ props.row.brief }}</span>
                        </el-form-item>
                        <el-form-item label="商品单位">
                            <span>{{ props.row.unit }}</span>
                        </el-form-item>
                        <el-form-item label="关键词">
                            <span>{{ props.row.keywords }}</span>
                        </el-form-item>
                        <el-form-item label="类目ID">
                            <span>{{ props.row.categoryId }}</span>
                        </el-form-item>
                        <el-form-item label="品牌商ID">
                            <span>{{ props.row.brandId }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
            label="商品编号"
            prop="goodsSn">
            </el-table-column>
            <el-table-column
            label="名称"
            prop="name"
            width="140">
            </el-table-column>
            <el-table-column
            label="图片"
            prop="picUrl">
                <!-- 插槽插入图片 -->
                <template slot-scope="scope">
                    <img class="imageSize" :src="scope.row.picUrl" alt="">
                </template>
            </el-table-column>
            <el-table-column
            label="分享图"
            prop="shareUrl">
            </el-table-column>
            <el-table-column
            label="详情"
            prop="desc"
            width="100">
                <template slot-scope="scope">
                    <el-button type="primary"  @click="lookDetail(scope.row.detail)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column
            label="专柜价格"
            prop="counterPrice">
            </el-table-column>
            <el-table-column
            label="当前价格"
            prop="retailPrice">
            </el-table-column>
            <el-table-column
            label="是否新品"
            prop="isNew">
                <template slot-scope="scope">
                    <el-tag v-show="scope.row.isNew" type="success" >新品</el-tag>
                    <el-tag v-show="!scope.row.isNew" >非新品</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            label="是否热卖"
            prop="isHot">
                <template slot-scope="scope">
                    <el-tag v-show="scope.row.isHot" type="success" >热卖</el-tag>
                    <el-tag v-show="!scope.row.isHot" >非热卖</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            label="是否在售"
            prop="isOnSale">
            <template slot-scope="scope">
                    <el-tag v-show="scope.row.isOnSale" type="success" >热卖</el-tag>
                    <el-tag v-show="!scope.row.isOnSale" >非热卖</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            label="操作"
            width="240"
            >
                <template slot-scope="scope">
                    <el-button
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- --------------------------------------分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { goodsList } from '@/api/goods'
import { getToken } from '@/utils/auth' // get token from cookie
export default{
    name:'goodsList',
    props:[],
    data(){
        return{
            goodsSn:'',
            name:'',
            tableData:[],
            currentPage:1,
            limit:10,
            total:1,
            title:'商品信息',//excel表格标题
            json_fields: {
                "商品ID":'id',
                "商品编号":'goodsSn',
                "名称":'name',
                "专柜价格":'counterPrice',
                "当前价格":'retailPrice',
                "是否新品":'isNew',
                "是否热卖":'isHot',
                "是否在售":'isOnSale',
                "首页主图":'',
                "宣传图片列表":'gallery',
                "商品介绍":'brief',
                "详细介绍":'detail',
                "商品图片":'picUrl',
                "商品单位":'unit',
                "关键字":'keywords',
                "类目ID":'categoryId',
                "品牌商ID":'brandId',
            },
            // 富文本
            detail:'',
            // 导出excel表格
            DetailsForm: [],
            form:[],
            dialogFormVisible: false,//决定详情页是否弹出
            // formLabelWidth: '120px',//表单内文字内容的宽度
            // 上传图片
            imageUrl: '',
            // 上传图片 请求接口需要带上这个请求头才能通过验证
            headers:{
                'X-Mymall-Admin-Token':getToken()
            },

            rules: {
                name: [{ required: true, message: '输入的内容不能为空', trigger: 'blur' }]
            }
        }
    },
    // 方法
    methods:{
        // 商品列表接口 函数
        goodsListData(data){
            goodsList(data).then(res=>{
                console.log(res);
                this.tableData=res.data.items //赋值给表格内容数据渲染
                this.total=res.data.total  // 将总条数拿出来
                this.DetailsForm=res.data.items  // 导出表格需要的数据
            })
        },
        // 查询
        search(){
            this.goodsListData({
                page:this.currentPage,
                limit:this.limit,
                goodsSn:this.goodsSn,
                name:this.name,
            })
        },
        // 添加
        add(){

        },
        // 查看详情
        lookDetail(detail){
            this.dialogFormVisible=true
            this.detail=detail
        },
        // 编辑方法
        handleEdit(){
            this.$router.push("./goodsEdit")
        },
        // 删除方法
        handleDelete(){

        },
        // 点击切换每页多少条数据
        handleSizeChange(e){
            this.currentPage=1
            this.limit=e
            console.log(this.limit);
            this.goodsListData({
                page:this.currentPage,
                limit:this.limit,
            })
        },
        // 点击切换页数
        handleCurrentChange(e){
            this.currentPage=e
            this.goodsListData({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                mobile:this.mobile,
            })
        }
    },
    // 生命周期钩子
    mounted(){
        this.goodsListData()
    }
}
</script>
<style lang="less">
.box{
    padding-right: 40px;
}
// 顶部查询框
.search{
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    .inputUser{
        width: 200px;
        margin-left: 20px;
    }
    .inputNumber{
        width: 200px; 
        margin: 0 10px;
    }
    .export-excel-wrapper{
        margin-left: 10px;
    }
}
// 详情页内标题内容
.el-dialog{
    width: 800px;
}
.el-dialog__header{
    text-align: center;
}
// 表格内容
.el-table{
    margin-left: 20px;
    margin-top: 20px;
}
.cell{
    text-align: center;
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
// 分页
.block{
    margin-left: 20px;
    margin-top: 30px;
}
// 表格内图片格式
.imageSize{
    width: 60px;
    height: 60px;
}
// 表格内下拉单 画廊图片
.gallery{
    width: 100px;
    height: 100px;
    margin-right: 10px;
}
// 上传图片的样式
// .avatar-uploader .el-upload {
//     border: 1px dashed #d9d9d9;
//     border-radius: 6px;
//     cursor: pointer;
//     position: relative;
//     overflow: hidden;
//   }
//   .avatar-uploader .el-upload:hover {
//     border-color: #409EFF;
//   }
//   .avatar-uploader-icon {
//     font-size: 28px;
//     color: #8c939d;
//     width: 178px;
//     height: 178px;
//     line-height: 178px;
//     text-align: center;
//   }
//   .avatar {
//     width: 178px;
//     height: 178px;
//     display: block;
//   }
</style>